<template>
  <div class="iconSvg">
    <el-scrollbar height="300px">
      <div class="iconSvg_list">
        <div
          class="iconSvg_list_item"
          :class="[item === choiceThis ? 'active' : '']"
          v-for="(item, index) in iconList"
          :key="index"
          @click="handleChoice(item)"
        >
          <svg-icon :icon-class="item" />
          <span class="iconSvg_list_item_text">{{ item }}</span>
        </div>
      </div>
    </el-scrollbar>
  </div>
</template>

<script setup>
import icons from "./requireIcon";
const { proxy } = getCurrentInstance();
const iconList = ref(icons);
const props = defineProps({
  choiceThis: {
    type: String,
    default: "",
  },
});
const emit = defineEmits(["choiceIcon"]);

const handleChoice = (item) => {
  emit("choiceIcon", item);
};

</script>

<style scoped lang="scss">
$borderColor: #dcdfe6;
.iconSvg {
  &_list {
    @include flexBox(row, null, null, wrap);
    border-top: 1px solid $borderColor;
    border-left: 1px solid $borderColor;
    &_item {
      @include flexBox(column, center, center);
      @include interim(.3s);
      background: #fff;
      &.active {
        color: #409eff;
        background-color: rgba($color: #409eff, $alpha: .1);
      }
      // margin: 10px;
      width: 25%;
      height: 80px;
      cursor: pointer;
      border-right: 1px solid $borderColor;
      border-bottom: 1px solid $borderColor;
      &:hover {
        color: #409eff;
      }
      .svg-icon {
        margin-bottom: 5px;
        font-size: 20px;
      }
      &_text {
        font-size: 12px;
        line-height: 20px;
      }
    }
  }
}
</style>
